<template>
  <div class="c1">
    <h2>{{ msg }}</h2>
    <h2>{{ msg.split('').reverse().join('') }}</h2>
    <h2>computed:{{ reMsg }}</h2>
    <h2>method:{{ reMsg }}</h2>
    <h2>{{ reMsg }}</h2>
    <h2>{{ reMsg }}</h2>
    <h2>{{ reMsgF() }}</h2>
    <h2>{{ reMsgF() }}</h2>
    <input type="text" v-model="msg" />
  </div>
</template>
<script>
import { computed, ref, watch } from 'vue'
export default {
  setup() {
    const msg = ref('Hello Vue')
    // 计算属性1-先演示计算属性的使用，语法，使用时括号问题
    const reMsg = computed(() => {
      console.log('computed触发')
      return msg.value.split('').reverse().join('')
    })
    // 计算属性2-再演示跟方法的区别，执行情况（计算属性有缓存）
    const reMsgF = () => {
      console.log('methods触发')
      return msg.value.split('').reverse().join('')
    } // 侦听器
    watch(msg, (newValue, oldValue) => {
      console.log(`旧值是:${oldValue},新值是:${newValue}`)
    })
    return {
      msg,
      reMsg,
      reMsgF
    }
  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.c1 {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background: linear-gradient(to right, #7474bf, #348ac7); */
  background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}
</style>
